<template>
  <div class="main">
    <div class="search-bar">
      <div class="form-item">
        <span class="item-title">时间类型：</span>
        <el-select v-model="dataQuery.timeType" clearable @change="dataQuery.beginDate=''">
          <el-option label="自然天" value="D"></el-option>
          <el-option label="自然月" value="M"></el-option>
          <el-option label="自定义" value="C"></el-option>
        </el-select>
      </div>
      <div v-show="dataQuery.timeType!=='C'" class="form-item">
        <span class="item-title">时间：</span>
        <el-date-picker
          v-model="dataQuery.beginDate"
          :type="dataQuery.timeType==='D'?'date':'month'"
          placeholder="选择"
          :format="dataQuery.timeType==='D'?'yyyy/MM/dd':'yyyy/MM'"
          :value-format="dataQuery.timeType==='D'?'yyyy/MM/dd':'yyyy/MM'">
        </el-date-picker>
      </div>
      <div v-show="dataQuery.timeType==='C'" class="form-item">
        <span class="item-title">时间：</span>
        <el-date-picker
          v-model="tempDateRange"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          format="yyyy/MM/dd"
          value-format="yyyy/MM/dd">
        </el-date-picker>
      </div>
      <div class="form-item">
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="card-data" v-if="businessTypeName==='全部'">
      <el-row :gutter="24">
        <template v-if="cardLoading">
          <el-col v-for="item in [1, 2, 3, 4, 5, 6, 7]" :key="item" :xs="24" :sm="12" :md="8" :xl="6">
            <el-card class="item" shadow="hover">
              <content-loader
                :height="162"
                :width="400"
                :speed="2"
                primary-color="#ddd"
                secondary-color="#ecebeb"
              >
                <rect x="0" y="0" rx="4" ry="4" width="60" height="30" />
                <rect x="0" y="40" rx="4" ry="4" width="300" height="10" />
                <rect x="340" y="40" rx="4" ry="4" width="60" height="10" />
                <rect x="0" y="70" rx="8" ry="8" width="120" height="50" />
                <rect x="130" y="90" rx="8" ry="8" width="30" height="30" />
                <rect x="0" y="150" rx="4" ry="4" width="190" height="10" />
                <rect x="210" y="150" rx="4" ry="4" width="190" height="10" />
              </content-loader>
            </el-card>
          </el-col>
        </template>
        <template v-else>
          <el-col v-for="item in cardData" :key="item.name" :xs="24" :sm="12" :md="8" :xl="6">
            <el-card class="item" shadow="hover">
              <div class="item-title">
                {{ item.name }}
                <el-tooltip v-if="item.desc" :content="item.desc" placement="right">
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="item-date">
                <span v-if="item.date[1]">{{ item.date[0] }} - {{ item.date[1] }}</span>
                <span v-else>{{ item.date[0] }}</span>
                <span v-if="item.isToday && item.date[1]">今日</span>
              </div>
              <div class="item-value">{{ item.value||0 }}<span v-text="item.unit"></span></div>
              <template>
                <div class="data-state">
                  <span v-if="item.chainRatio" :class="{'state-up': item.chainRatio.type, 'state-down': !item.chainRatio.type}">
                    环比<i :class="{'el-icon-caret-top':item.chainRatio.type,'el-icon-caret-bottom':!item.chainRatio.type}">{{ item.chainRatio.value }}</i>
                  </span>
                  <span v-else></span>
                  <span v-if="item.yearOnYear" :class="{'state-up': item.yearOnYear.type, 'state-down': !item.yearOnYear.type}">
                    同比<i :class="{'el-icon-caret-top':item.yearOnYear.type,'el-icon-caret-bottom':!item.yearOnYear.type}">{{ item.yearOnYear.value }}</i>
                  </span>
                </div>
              </template>
            </el-card>
          </el-col>
        </template>
        <!-- <el-col v-if="heapLoading" :xs="24" :sm="12" :md="8" :xl="6">
                    <el-card class="item" shadow="hover">
                        <content-loader
                                :height="162"
                                :width="400"
                                :speed="2"
                                primaryColor="#ddd"
                                secondaryColor="#ecebeb"
                        >
                            <rect x="0" y="0" rx="4" ry="4" width="60" height="30" />
                            <rect x="0" y="40" rx="4" ry="4" width="300" height="10" />
                            <rect x="340" y="40" rx="4" ry="4" width="60" height="10" />
                            <rect x="0" y="70" rx="8" ry="8" width="120" height="50" />
                            <rect x="130" y="90" rx="8" ry="8" width="30" height="30" />
                            <rect x="0" y="150" rx="4" ry="4" width="190" height="10" />
                            <rect x="210" y="150" rx="4" ry="4" width="190" height="10" />
                        </content-loader>
                    </el-card>
                </el-col> -->
        <!-- <el-col v-else :xs="24" :sm="12" :md="8" :xl="6">
                    <el-card class="item" shadow="hover">
                        <div class="item-title">
                            {{heapData.activityData.name}}
                            <el-tooltip v-if="heapData.activityData.desc" :content="heapData.activityData.desc" placement="right">
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </div>
                        <div class="item-date">
                            <span v-if="heapData.activityData.date[1]">{{heapData.activityData.date[0]}} - {{heapData.activityData.date[1]}}</span>
                            <span v-else>{{heapData.activityData.date[0]}}</span>
                            <span v-if="heapData.activityData.isToday && heapData.activityData.date[1]">今日</span>
                        </div>
                        <div class="item-value">{{heapData.activityData.value||0}}<span v-text="heapData.activityData.unit"></span></div>
                        <template>
                            <div class="data-state">
                                <span v-if="heapData.activityData.chainRatio" :class="{'state-up': heapData.activityData.chainRatio.type, 'state-down': !heapData.activityData.chainRatio.type}">
                                    环比<i :class="{'el-icon-caret-top':heapData.activityData.chainRatio.type,'el-icon-caret-bottom':!heapData.activityData.chainRatio.type}">{{heapData.activityData.chainRatio.value}}</i>
                                </span>
                                <span v-else></span>
                                <span v-if="heapData.activityData.yearOnYear" :class="{'state-up': heapData.activityData.yearOnYear.type, 'state-down': !heapData.activityData.yearOnYear.type}">
                                    同比<i :class="{'el-icon-caret-top':heapData.activityData.yearOnYear.type,'el-icon-caret-bottom':!heapData.activityData.yearOnYear.type}">{{heapData.activityData.yearOnYear.value}}</i>
                                </span>
                            </div>
                        </template>
                    </el-card>
                </el-col> -->
      </el-row>
    </div>
    <el-card class="data-block gmv-data-change" shadow="hover" v-if="businessTypeName==='全部'">
      <div class="card-title">GMV变化趋势</div>
      <div v-if="gmvRate.calculateData.date" class="card-sub-title">{{ gmvRate.calculateData.date[0] }} - {{ gmvRate.calculateData.date[1] }}</div>
      <div class="container">
        <div class="calculate-body">
          <div class="data">{{ gmvRate.calculateData.value||0 }}<span>{{ gmvRate.calculateData.unit }}</span></div>
          <div class="data-state">
            <span v-if="gmvRate.calculateData.chainRatio" :class="{'state-up': gmvRate.calculateData.chainRatio.type, 'state-down': !gmvRate.calculateData.chainRatio.type}">
              环比<i :class="{'el-icon-caret-top':gmvRate.calculateData.chainRatio.type,'el-icon-caret-bottom':!gmvRate.calculateData.chainRatio.type}">{{ gmvRate.calculateData.chainRatio.value }}</i>
            </span>
            <span v-if="gmvRate.calculateData.yearOnYear" :class="{'state-up': gmvRate.calculateData.yearOnYear.type, 'state-down': !gmvRate.calculateData.yearOnYear.type}">
              同比<i :class="{'el-icon-caret-top':gmvRate.calculateData.yearOnYear.type,'el-icon-caret-bottom':!gmvRate.calculateData.yearOnYear.type}">{{ gmvRate.calculateData.yearOnYear.value }}</i>
            </span>
          </div>
          <div class="line"></div>
          <div v-if="gmvRate.calculateData.all" class="calculate-item"><span>合计：</span>{{ gmvRate.calculateData.all.value||0 }}{{ gmvRate.calculateData.all.unit }}</div>
          <div v-if="gmvRate.calculateData.average" class="calculate-item"><span>均值：</span>{{ gmvRate.calculateData.average.value||0 }}{{ gmvRate.calculateData.average.unit }}</div>
        </div>
        <div ref="gmv-rate" class="chart-body"></div>
      </div>
    </el-card>
    <div v-if="businessTypeName!=='全部'" ref="gmv-rate" class="chart-body"></div>
    <el-card class="data-block" shadow="hover">
      <div class="title-container">
        <div class="sub-item">
          <div class="card-title">{{ categorySalesData.name }}</div>
          <div v-if="categorySalesData.date" class="card-sub-title">{{ categorySalesData.date[0] }} - {{ categorySalesData.date[1] }} <span v-if="categorySalesData.isToday"> | 今日</span></div>
        </div>
      </div>
      <div class="card-body">
        <el-table :data="categorySalesData.value" border highlight-current-row>
          <el-table-column align="center" prop="name" label="品类" min-width="180"></el-table-column>
          <el-table-column align="center" prop="sales_volume" label="商品销量" min-width="100" sortable></el-table-column>
          <el-table-column align="center" prop="orders" label="订单量" min-width="100" sortable></el-table-column>
          <el-table-column align="center" prop="users" label="下单人数" min-width="100" sortable></el-table-column>
          <el-table-column align="center" prop="customer_price" label="客单价" min-width="100" sortable></el-table-column>
          <el-table-column align="center" prop="gmv" label="GMV" min-width="180" sortable></el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- <el-card class="data-block" shadow="hover" v-loading="categoryOtherDataLoading">
            <div class="title-container">
                <div class="sub-item">
                    <div class="card-title">{{categoryOtherData.name}}</div>
                    <div class="card-sub-title" v-if="categoryOtherData.date">{{categoryOtherData.date[0]}} - {{categoryOtherData.date[1]}} <span v-if="categoryOtherData.isToday"> | 今日</span></div>
                </div>
                <a :href="`${exportUrl}?beginDate=${dataQuery.beginDate}&endDate=${dataQuery.endDate}&timeType=${dataQuery.timeType}`" target="_blank">
                    <el-button type="primary" size="small">导出</el-button>
                </a>
            </div>
            <div class="card-body">
                <el-table :data="categoryOtherData.value" border highlight-current-row>
                    <el-table-column align="center" prop="name" label="品类" min-width="180"></el-table-column>
                    <el-table-column align="center" prop="uv" label="访问数(UV)" min-width="180" sortable></el-table-column>
                    <el-table-column align="center" prop="avg" label="平均转化率(%)" min-width="180" sortable></el-table-column>
                </el-table>
            </div>
        </el-card> -->
    <el-row v-show="false" class="data-block heap-data-change" :gutter="24">
      <el-col :md="24" :lg="24">
        <el-card v-loading="heapRateLoading" class="item" shadow="hover">
          <div class="card-title">全站日活变化趋势</div>
          <div v-if="heapRate.calculateData.date" class="card-sub-title">{{ heapRate.calculateData.date[0] }} - {{ heapRate.calculateData.date[1] }}</div>
          <div class="calculate-body">
            <div class="data">{{ heapRate.calculateData.value }}<span>{{ heapRate.calculateData.unit }}</span></div>
            <div class="data-state">
              <span v-if="heapRate.calculateData.chainRatio" :class="{'state-up': heapRate.calculateData.chainRatio.type, 'state-down': !heapRate.calculateData.chainRatio.type}">
                环比<i :class="{'el-icon-caret-top':heapRate.calculateData.chainRatio.type,'el-icon-caret-bottom':!heapRate.calculateData.chainRatio.type}">{{ heapRate.calculateData.chainRatio.value }}</i>
              </span><br />
              <span v-if="heapRate.calculateData.yearOnYear" :class="{'state-up': heapRate.calculateData.yearOnYear.type, 'state-down': !heapRate.calculateData.yearOnYear.type}">
                同比<i :class="{'el-icon-caret-top':heapRate.calculateData.yearOnYear.type,'el-icon-caret-bottom':!heapRate.calculateData.yearOnYear.type}">{{ heapRate.calculateData.yearOnYear.value }}</i>
              </span>
            </div>
            <div class="line"></div>
            <div>
              <div v-if="heapRate.calculateData.all" class="calculate-item"><span>合计：</span>{{ heapRate.calculateData.all.value||0 }}{{ heapRate.calculateData.all.unit }}</div>
              <div v-if="heapRate.calculateData.average" class="calculate-item"><span>均值：</span>{{ heapRate.calculateData.average.value||0 }}{{ heapRate.calculateData.average.unit }}</div>
            </div>
          </div>
          <div ref="heap-rate" class="chart-body"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-card class="data-block" shadow="hover">
      <div class="card-title">各端GMV贡献情况</div>
      <div v-if="gmvData.date" class="card-sub-title">{{ gmvData.date[0] }} - {{ gmvData.date[1] }}</div>
      <div class="card-body">
        <el-table :data="gmvData.data" border highlight-current-row>
          <el-table-column align="center" prop="typeName" label="业务类别" min-width="180"></el-table-column>
          <el-table-column align="center" prop="gmv" label="GMV" min-width="180" sortable></el-table-column>
          <el-table-column align="center" prop="orderNum" label="订单量" min-width="180" sortable></el-table-column>
          <el-table-column align="center" prop="userNum" label="下单人数" min-width="180" sortable></el-table-column>
          <el-table-column align="center" prop="orderCustomerPrice" label="客单价" min-width="180" sortable></el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-card class="data-block" shadow="hover">
      <div class="card-title">会员新增情况</div>
      <div class="card-body">
        <el-table :data="memberData" border highlight-current-row>
          <el-table-column align="center" prop="roleName" label="项目" min-width="180"></el-table-column>
          <el-table-column align="center" prop="day" label="本日新增" min-width="180"></el-table-column>
          <el-table-column align="center" prop="month" label="本月新增" min-width="180"></el-table-column>
          <el-table-column align="center" prop="total" label="总人数" min-width="180"></el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
import { ContentLoader } from 'vue-content-loader'
import moment from 'moment'
var echarts = require('echarts')
require('echarts/lib/chart/line')
let domGMV, gmvRate, domHEAP, heapRate
export default {
  name: 'BusinessDataView',
  components: {
    ContentLoader
  },
  props: {
    businessTypeName: {
      type: String,
      default: ''
    },
    businessType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tempDateRange: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }]
      },

      dataQuery: {
        timeType: 'D',
        beginDate: '',
        endDate: ''
      },
      cardLoading: true,
      cardData: [],
      heapLoading: true,
      heapData: {
        all: {},
        average: {},
        activityData: {
          date: []
        }
      },
      gmvRate: {
        calculateData: {},
        detailData: {
          dates: [],
          values: []
        }
      },
      gmvData: {
        name: '各端GMV贡献情况',
        date: [],
        data: []
      },
      heapRateLoading: true,
      heapRate: {
        calculateData: {},
        detailData: {
          dates: [],
          values: []
        }
      },
      categorySalesData: {
        name: '',
        date: [],
        value: [],
        isToday: 0
      },
      categoryOtherDataLoading: true,
      categoryOtherData: {
        name: '',
        date: [],
        value: [],
        isToday: 0
      },
      exportUrl: `${process.env.BI_BASE_API}/bi/exportCategorySalesAnalysis`,
      memberData: []
    }
  },
  mounted() {
    domGMV = this.$refs['gmv-rate']
    gmvRate = echarts.init(domGMV)
    domHEAP = this.$refs['heap-rate']
    heapRate = echarts.init(domHEAP)
    this.fetchData()
    window.onresize = function() {
      gmvRate.resize()
      heapRate.resize()
    }
  },
  methods: {
    // 重置
    reset() {
      this.dataQuery = {
        timeType: 'D',
        beginDate: ''
      }
      this.tempDateRange = []
      this.search()
    },
    // 搜索
    search() {
      this.fetchData()
    },
    // fetch data
    fetchData() {
      if (this.dataQuery.timeType === 'C') {
        const length = this.tempDateRange.length
        this.dataQuery.beginDate = length ? this.tempDateRange[0] : ''
        this.dataQuery.endDate = length ? this.tempDateRange[1] : ''
      } else {
        this.dataQuery.endDate = ''
      }
      this.getCardData()
      // this.getHeapData();
      this.getGmvChangeData()
      // this.getHeapChangeData();
      this.getCategorySalesData()
      // this.getCategoryOtherData();
      this.getGmvData()
      this.getMemberData()
    },
    getCardData() {
      this.request({
        url: '/bi/getBoardDataShowInfo',
        method: 'post',
        data: this.dataQuery
      }).then(({ data }) => {
        this.cardData = data
        this.cardLoading = false
      }).catch(err => {
        console.log(err)
        this.cardData = []
        this.cardLoading = false
      })
    },
    getHeapData() {
      this.heapLoading = true
      this.request({
        url: '/bi/getHeapDataInfoIncludeStatistics',
        method: 'post',
        data: this.dataQuery
      }).then(({ data }) => {
        this.heapData = data
        this.heapLoading = false
      }).catch(err => {
        console.log(err)
        this.cardData = []
        this.heapLoading = false
      })
    },
    getGmvChangeData() {
      this.request({
        url: '/bi/GMVChangeInfo',
        method: 'post',
        data: this.dataQuery
      }).then(({ data }) => {
        console.log(data)
        this.gmvRate = data

        gmvRate.setOption({
          color: ['#1ea0ff'],
          grid: {
            left: '1%',
            right: '2%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            formatter: '{b}<br />{a}：{c}万'
          },
          xAxis: {
            type: 'category',
            data: data.detailData.dates || [],
            name: '支付订单的实际支付金额的总和',
            nameLocation: 'center',
            nameTextStyle: {
              padding: 48
            }
          },
          yAxis: {
            type: 'value',
            splitLine: { show: false },
            axisLabel: {
              formatter: '{value}万'
            }
          },
          series: [
            {
              name: '支付订单的实际支付金额的总和',
              data: data.detailData.values || [],
              smooth: true,
              type: 'line'
            }
          ]
        })
        setTimeout(function() {
          gmvRate.resize()
        }, 50)
      }).catch(err => {
        console.log(err)
        this.gmvRate = {
          calculateData: {},
          detailData: {
            dates: [],
            values: []
          }
        }
      })
    },
    getHeapChangeData() {
      this.heapRateLoading = true
      this.request({
        url: '/bi/getHeapInfoTrend',
        method: 'post',
        data: this.dataQuery
      }).then(({ data }) => {
        console.log(data)
        this.heapRate = data
        this.heapRateLoading = false

        heapRate.setOption({
          color: ['#1ea0ff'],
          grid: {
            top: '2%',
            left: '1%',
            right: '2%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            formatter: '{b}<br />{a}：{c}人'
          },
          xAxis: {
            type: 'category',
            data: data.detailData.dates || [],
            name: '全站访问APP触发的用户数',
            nameLocation: 'center',
            nameTextStyle: {
              padding: 24
            }
          },
          yAxis: {
            type: 'value',
            splitLine: { show: false },
            axisLabel: {
              formatter: '{value}人'
            }
          },
          series: [
            {
              name: '全站访问APP触发的用户数',
              data: data.detailData.values || [],
              smooth: true,
              type: 'line'
            }
          ]
        })
        setTimeout(function() {
          heapRate.resize()
        }, 50)
      }).catch(err => {
        console.log(err)
        this.heapRate = {
          calculateData: {},
          detailData: {
            dates: [],
            values: []
          }
        }
        this.heapRateLoading = false
      })
    },
    getGmvData() {
      this.request({
        url: '/bi/getEachEndInfo',
        method: 'post',
        data: this.dataQuery
      }).then(({ data }) => {
        if (this.businessTypeName && this.businessType) {
          for (let i = 0; i < data.data.length; i++) {
            if (data.data[i]['typeName'] !== this.businessTypeName && data.data[i]['type'] !== this.businessType) {
              data.data.splice(i, 1)
              i--
            }
          }
        }
        this.gmvData = data
      }).catch(err => {
        console.log(err)
        this.gmvData = {
          name: '各端GMV贡献情况',
          date: [],
          data: []
        }
      })
    },
    getCategorySalesData() {
      this.request({
        url: '/bi/queryCategorySalesAnalysis',
        method: 'post',
        data: this.dataQuery
      }).then(({ data }) => {
        if (this.businessTypeName && this.businessType) {
          for (let i = 0; i < data.value.length; i++) {
            if (this.businessTypeName === '箱起') {
              if (data.value[i]['name'] !== '箱起' && data.value[i]['pid'] !== -999) {
                data.value.splice(i, 1)
                i--
              }
            } else {
              if (data.value[i]['name'] === '箱起' && data.value[i]['pid'] === -999) {
                data.value.splice(i, 1)
                i--
              }
            }
          }
        }
        this.categorySalesData = data
      }).catch(err => {
        console.log(err)
        this.categorySalesData = {
          name: '',
          date: [],
          value: [],
          isToday: 0
        }
      })
    },
    getCategoryOtherData() {
      this.categoryOtherDataLoading = true
      this.request({
        url: '/bi/queryCategoryUV',
        method: 'post',
        data: this.dataQuery
      }).then(({ data }) => {
        this.categoryOtherData = data
        this.categoryOtherDataLoading = false
      }).catch(err => {
        console.log(err)
        this.categoryOtherData = {
          name: '',
          date: [],
          value: [],
          isToday: 0
        }
        this.categoryOtherDataLoading = false
      })
    },
    /* exportCategorySalesData(){
        this.exportLoading = true;
        this.request({
          url: '/bi/exportCategorySalesAnalysis',
          method: 'get',
          params: this.dataQuery,
          responseType: 'arraybuffer'
        }).then((data) => {
          let date = moment().format('YYYYMMDD/HHmmss').replace(/\//g, '_');
          let filename = `品类销售数据${date}.xls`;
          this.downloadFile(data, filename);
          this.exportLoading = false;
        }).catch(err => {
          console.log(err);
          this.exportLoading = false;
        });
      }, */
    getMemberData() {
      this.request({
        url: '/bi/getUserAddInfo',
        method: 'get'
      }).then(({ data }) => {
        this.memberData = data
      }).catch(err => {
        console.log(err)
        this.memberData = []
      })
    }
  }
}
</script>
<style lang="scss">
    @import "../../styles/mixin";

    .data-block{
        margin-bottom: 24px;

        .title-container{
            @include flex;
            @include a-center;

            .sub-item{
                @include sub-item;
            }
        }

        &:last-child{
            margin-bottom: 0;
        }
    }

    .card-title {
        color: #304156;
        font-size: 20px;
        padding-left: 12px;
        border-left: 6px solid #304156;
    }
    .card-sub-title {
        color: #4d4d4d;
        font-size: 14px;
        padding-left: 18px;
        margin-top: 12px;
    }
    .card-body {
        padding-top: 24px;
    }
    .data-state {
        color: #000000;
        font-size: 14px;
        margin-top: 28px;

        span {
            @include text-ellipsis;
            i {
                margin-left: 4px;
            }

            &.state-up > i {
                color: #a94442
            }
            &.state-down > i {
                color: #42b983
            }
        }
    }

    .card-data {
        margin-top: 8px;
        .item {
            min-height: 195px;
            margin-bottom: 24px;
            .item-title {
                color: #010101;
                font-size: 20px;

                i{
                    color: #999;
                }
            }
            .item-date {
                color: #999;
                font-size: 14px;
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
            }
            .item-value {
                color: #000000;
                font-size: 36px;
                margin-top: 25px;
                span {
                    font-size: 24px;
                    padding-left: 12px;
                }
            }

            .data-state > span {
                width: 47%;
                display: inline-block;
            }
        }
    }

    .gmv-data-change{
        width: 100%;

        .container{
            @include flex;
            height: 100%;

            .calculate-body {
                @include flex(column);
                @include j-center;
                padding: 24px;
                .data {
                    color: #000000;
                    font-size: 32px;
                    span {
                        font-size: 18px;
                    }
                }
                .line {
                    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
                    margin: 35px 0 40px;
                }
                .calculate-item {
                    color: #333333;
                    font-size: 20px;

                    span {
                        color: #000;
                        font-size: 14px;
                    }

                    &:last-child {
                        margin-top: 12px;
                    }
                }
            }
            .chart-body {
                @include sub-item;
                height: 300px;

                &>div:first-child{
                    width: 100% !important;
                }
            }
        }
    }

    .heap-data-change{
        .calculate-body{
            @include flex;
            @include a-center;
            margin: 12px 24px;
            .data {
                color: #000000;
                font-size: 32px;
                span {
                    font-size: 18px;
                }
            }

            .data-state{
                @include sub-item;
                margin: 0 12px;

                &>span:first-child{
                    display: inline-block;
                    padding-bottom: 8px;
                }
            }
            .line {
                height: 50px;
                border-left: 1px solid rgba(0, 0, 0, 0.2);
                margin: 3px 24px;
            }
            .calculate-item {
                color: #333333;
                font-size: 20px;

                span {
                    color: #000;
                    font-size: 14px;
                }

                &:last-child {
                    margin-top: 8px;
                }
            }
        }
        .chart-body{
            height: 300px;
        }
    }

</style>
